<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="/common/taglibs.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
	<script src="//cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
	<script type="text/javascript" src="${base}/js/plugin/layui/2.3.0/layui.js"></script>
	<link rel="stylesheet" href="${base}/js/plugin/layui/2.3.0/css/layui.css">
	<script>
        function getQueryStringByDecode(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) return decodeURI(r[2]); return null;
        }
        var deepCopy = function(obj) {
            var newO = {};
            if (obj instanceof Array) {
                newO = [];
            }
            for ( var key in obj) {
                var val = obj[key];
                newO[key] = typeof val === 'object' ? arguments.callee(val) : val;
            }
            return newO;
        }
	</script>
<style >
	.layui-form-item {
		margin-bottom: 7px;
		clear: both;
	}
</style>
</head>
<body style="width: 100%;height: 99%">

<div class="layui-tab">
	<ul class="layui-tab-title">
		<li class="layui-this">基本信息</li>
		<li class="" id="xiaoshou">销售属性</li>
		<li class="" id="picDetail">图片详情</li>
		<li class="package">套餐</li>
		<li class="">物流服务</li>
		<li class="">售后保障</li>
		<li class="">其它信息</li>
	</ul>
	<div class="layui-tab-content">
		<div class="layui-tab-item layui-show">

			<h4>所属类目:<span id="category"></span></h4>
			<button class="layui-btn" style="margin-left: 10px;margin-top: 10px;"  lay-submit lay-filter="*" >立即提交</button>
			<fieldset class="layui-elem-field layui-field-title" >
				<legend>基本信息</legend>
			</fieldset>
			<form class="layui-form" action=""  lay-filter="example" >
			<div id="base">

				<input type="hidden" name="id" value=""  >
				<div class="layui-form-item">
					<div class="layui-inline">
						<label class="layui-form-label">是否套装</label>
						<div class="layui-input-inline">
							<input type="radio" name="isPackage" value="0" title="单品" lay-filter="click">
							<input type="radio" name="isPackage" value="1" title="套装" lay-filter="click">
						</div>
					</div>
					<div class="layui-inline">
						<label class="layui-form-label" style=" margin-top: 31px;">商品类型</label>
						<div class="layui-input-inline">
							<input type="radio" name="productTypeId" value="1" title="物料商品">
							<input type="radio" name="productTypeId" value="2" title="服务类商品">
							<input type="radio" name="productTypeId" value="3" title="虚拟类商品">
						</div>
					</div>
					<div class="layui-inline">
						<label class="layui-form-label" style="margin-top:15px;">采购地</label>
						<div class="layui-input-inline">
							<input type="radio" name="isGlobalstock" value="0" title="国内">
							<input type="radio" name="isGlobalstock" value="1" title="海外及港澳台">
						</div>
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">商品标题</label>
					<div class="layui-input-block">
						<input type="text" name="name" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">商品卖点</label>
					<div class="layui-input-block">
						<input type="text" name="sellPoint" lay-verify="required" placeholder="请输入商品卖点" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<div class="layui-inline">
						<label class="layui-form-label">商品价格(元)</label>
						<div class="layui-input-inline">
							<input type="number" name="price" lay-verify="required" autocomplete="off" placeholder="请输入商品价格" class="layui-input">
						</div>
					</div>
					<div class="layui-inline">
						<label class="layui-form-label">商品编号</label>
						<div class="layui-input-inline">
							<input type="text" name="code" lay-verify="required" placeholder="请输入商品编号" autocomplete="off" class="layui-input">
						</div>
					</div>
<%--					<div class="layui-inline">
						<label class="layui-form-label">商品单位</label>
						<div class="layui-input-inline">
							<input type="text" name="unit" lay-verify="required" placeholder="请输入商品单位" autocomplete="off" class="layui-input">
						</div>
					</div>--%>
					<div class="layui-inline">
						<label class="layui-form-label">商品单位</label>
						<div class="layui-input-inline">
							<select name="measurementId" id="measurementId">
								<%--<option value="0">耐克</option>
								<option value="1">阿迪</option>
								<option value="2">匹克</option>--%>
							</select>
						</div>
					</div>
					<div class="layui-inline" style ="margin-right: 9px">
						<label class="layui-form-label">商家编码</label>
						<div class="layui-input-inline">
							<input type="text" name="merchantCode" lay-verify="required" placeholder="请输入商家编码" autocomplete="off" class="layui-input">
						</div>
					</div>
					<div class="layui-inline">
						<label class="layui-form-label">商城价(元)</label>
						<div class="layui-input-inline">
							<input type="number" name="shopPrice" lay-verify="required" autocomplete="off" placeholder="请输入商品价格" class="layui-input">
						</div>
					</div>
					<div class="layui-inline">
						<label class="layui-form-label">批发价(元)</label>
						<div class="layui-input-inline">
							<input type="number" name="wholesalePrice" lay-verify="required" autocomplete="off" placeholder="请输入批发价" class="layui-input">
						</div>
					</div>
					<div class="layui-inline">
						<label class="layui-form-label">进货价(元)</label>
						<div class="layui-input-inline">
							<input type="number" name="purchasePrice" lay-verify="required" autocomplete="off" placeholder="请输入进货价" class="layui-input">
						</div>
					</div>
					<div class="layui-inline" style ="margin-right: 9px">
						<label class="layui-form-label" >商品型号</label>
						<div class="layui-input-inline">
							<input type="text" name="productModel" lay-verify="required" autocomplete="off" placeholder="请输入商品型号" class="layui-input">
						</div>
					</div>
					<div class="layui-inline">
						<label class="layui-form-label">商品条形码</label>
						<div class="layui-input-inline">
							<input type="text" name="merchantBarCode" lay-verify="required" autocomplete="off" placeholder="请输入商品条形码" class="layui-input">
						</div>
					</div>
					<div class="layui-inline">
						<label class="layui-form-label">单品数量</label>
						<div class="layui-input-inline">
							<input type="number" name="quantity" lay-verify="required" autocomplete="off" placeholder="请输入商品数量" class="layui-input">
						</div>
					</div>
					<div class="layui-inline">
						<label class="layui-form-label">商品品牌</label>
						<div class="layui-input-inline layui-form" lay-filter="selFilter">
							<select name="productBrandId" id="productBrandId">
								<%--<option value="0">耐克</option>
								<option value="1">阿迪</option>
								<option value="2">匹克</option>--%>
							</select>
						</div>
					</div>

				</div>
			</div>

				<div id="attrs">


				</div>


			</form>
		</div>
		<!-- 销售属性 -->
		<div class="layui-tab-item">
				<div id="salesAttrs">


				</div>
		</div>
		<%--图片详情--%>
		<div class="layui-tab-item">
			<div id="picIframe">


			</div>
		</div>
		<%--套餐--%>
		<div class="layui-tab-item package">
			<div id="packageDet">

			</div>
		</div>
		<%--物流服务--%>
		<div class="layui-tab-item">
			<form class="layui-form" action=""  lay-filter="example" >
			<div id="logisticsService">
					<input type="hidden" name="id" value=""  >
					<div class="layui-form-item">
						<label class="layui-form-label" style="margin-right: -66px">快递运费：</label>
						<div class="layui-inline">
							<label class="layui-form-label">平邮:</label>
							<div class="layui-input-inline">
								<input type="text" name="postFee" lay-verify="required" autocomplete="off"  class="layui-input"  >
							</div>
						</div>
						<div class="layui-inline">
							<label class="layui-form-label">快递:</label>
							<div class="layui-input-inline">
								<input type="text" name="expressFee" lay-verify="required" autocomplete="off"  class="layui-input"  >
							</div>
						</div>
						<div class="layui-inline">
							<label class="layui-form-label">ems:</label>
							<div class="layui-input-inline">
								<input type="text" name="emsFee" lay-verify="required" autocomplete="off"  class="layui-input"  >
							</div>
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label" >包装重量：</label>
						<div class="layui-inline">
							<div class="layui-input-inline">
								<input type="text" name="packageWeight" lay-verify="required" autocomplete="off"  class="layui-input" >
							</div>
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">包装内容：</label>
						<div class="layui-input-block">
							<textarea type="text" name="packageContent" lay-verify="required"  autocomplete="off" class="layui-input"></textarea>
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label" style="margin-right: -82px">物流体积：</label>
						<div class="layui-inline">
							<label class="layui-form-label">长:</label>
							<div class="layui-input-inline">
								<input type="text" name="packageLength" lay-verify="required" autocomplete="off"  class="layui-input" >
							</div>
						</div>
						<div class="layui-inline">
							<label class="layui-form-label">宽:</label>
							<div class="layui-input-inline">
								<input type="text" name="packageWidth" lay-verify="required" autocomplete="off"  class="layui-input" >
							</div>
						</div>
						<div class="layui-inline">
							<label class="layui-form-label">高:</label>
							<div class="layui-input-inline">
								<input type="text" name="packageHeight" lay-verify="required" autocomplete="off"  class="layui-input" >
							</div>
						</div>
					</div>
<%--					<div class="layui-form-item">
						<label class="layui-form-label">物流重量：</label>
						<div class="layui-input-block">
							<input type="text" name="sellPoint" lay-verify="required"  autocomplete="off" class="layui-input" style="width: 500px;">
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">物流模板：</label>
						<div class="layui-input-block">
							<input type="text" name="sellPoint" lay-verify="required"  autocomplete="off" class="layui-input" style="width: 500px;">
						</div>
					</div>--%>
				<button class="layui-btn site-demo-layedit" lay-submit lay-filter="logistics">立即提交</button>
			</div>
			</form>
		</div>
		<%--售后保障--%>

		<div class="layui-tab-item">
			<form class="layui-form" action=""  lay-filter="example" >
				<div id="afterSales">
					<div class="layui-form-item">
						<div class="layui-inline">
							<label class="layui-form-label">货到付款:</label>
							<div class="layui-input-inline">
								<input type="radio" name="isCod" value="0" title="否" lay-filter="refer">
								<input type="radio" name="isCod" value="1" title="是" lay-filter="refer">
							</div>
						</div>
					</div>
					<div class="layui-form-item">
						<div class="layui-inline">
							<label class="layui-form-label">发票:</label>
							<div class="layui-input-inline">
								<input type="radio" name="isInvoice" value="0" title="否" lay-filter="refer">
								<input type="radio" name="isInvoice" value="1" title="是" lay-filter="refer">
							</div>
						</div>
					</div>
					<div class="layui-form-item">
						<div class="layui-inline">
							<label class="layui-form-label">保修:</label>
							<div class="layui-input-inline">
								<input type="radio" name="isWarranty" value="0" title="否" lay-filter="refer">
								<input type="radio" name="isWarranty" value="1" title="是" lay-filter="refer">
							</div>
						</div>
					</div>
			</div>
		</form>
	</div>

		<%--其它信息--%>
		<div class="layui-tab-item">
			<div id="other">

			</div>
		</div>
	</div>
</div>
<script>

	var salesAttrsLength = 0;
    layui.use(['element','form', 'layedit', 'laydate'], function(){
        var $ = layui.jquery
            ,element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块
        var form = layui.form,layedit = layui.layedit
            ,laydate = layui.laydate;
		$.getJSON("${base}/product/info?id="+getQueryStringByDecode("id"),function (res) {
			console.log(res);
			if(res.data.info.isPackage==0){
				$(".package").hide();
			}
			initAttr(res.data.attr);
			for(var key in res.data.measurement){
				var value = res.data.measurement[key].id;
			}
			for(var key in res.data.info){
			    var value = res.data.info[key];
                $(":radio[name='"+key+"'][value='" + value + "']").prop("checked", "checked");
                $("input[type='number'][name='"+key+"']").val(value);
                $("input[type='text'][name='"+key+"']").val(value);
				$("textarea[type='text'][name='"+key+"']").val(value);
                $("input[type='hidden'][name='"+key+"']").val(value);
			}
			for(var i=0;i<res.data.brand.length;i++){
				var brandName = res.data.brand[i].name;
				var brandId = res.data.brand[i].id;
				var html ="";
				html+='<option value="'+brandId+'">'+brandName+'</option>';
				$('#productBrandId').append(html);
			}
			for(var i=0;i<res.data.measurement.length;i++){
				var measurementName = res.data.measurement[i].name;
				var measurementId = res.data.measurement[i].id;
				var html ="";
				html+='<option value="'+measurementId+'">'+measurementName+'</option>';
				$('#measurementId').append(html);
			}
			var attrJson = {};
            if(res.data.info.attrJson!=""){
                attrJson = JSON.parse(res.data.info.attrJson);
			}


			for(var key in attrJson){
			    var value = attrJson[key];
                $("input[name='attr-"+key+"']").val(value);
                $("select[name='attr-"+key+"']").find("option[value='"+value+"']").attr("selected",true);
			}

            //表单初始赋值


            form.on('submit(*)', function(data){save();return false;});
			form.on('radio(click)', function (data){switching(data);return false;});
			form.on('radio(refer)',function (data) {save(true);return false;});
			form.on("submit(logistics)",function () {save(true);return false;});

			$('#xiaoshou').click(function () {
                $('#salesAttrs').html('<iframe    src="${base}/product/sku?productId='+res.data.info.id+'"  width="100%" height="'+($(window).height()-130)+'px"  frameborder="0"></iframe>');
            });
			$('#picDetail').click(function () {
				if($('#picDetail iframe').length==0){
					$('#picIframe').html('<iframe    src="${base}/product/detail-pic?productId='+res.data.info.id+'"  width="100%" height="'+($(window).height()-130)+'px"  frameborder="0"></iframe>');
				}
            });
			$('.package').click(function () {
                $('#packageDet').html('<iframe    src="${base}/product/package/det?productPackageId='+res.data.info.id+'"  width="100%" height="'+($(window).height()-130)+'px"  frameborder="0"></iframe>');
            });


            element.init();
            form.render();
        });



    });

	//设置为单品时 套餐tag消失.  设置为套餐时tag显示
	function switching(data){
		if(data.value == 0 ){
			$(".package").hide();
		}else{
			$(".package").show();
		}
	}



    function initAttr(res) {
        var category = res.name;
        $('#category').html(category);
        var rows = res.groups;
        var attrsHtml = "";
        var salesAttrs = "";
		if(rows!=null){
			for(var i =0 ;i<rows.length;i++){
				var group = rows[i];
				attrsHtml += '<fieldset class="layui-elem-field layui-field-title" ><legend>'+group.productAttrGroupName+'</legend></fieldset>';
				if(group.attrs!=null){
					$.each(group.attrs,function(index,attr){
						if(attr.isSale==1){
							salesAttrsLength ++;
							salesAttrs += '<div class="layui-form-item"><label class="layui-form-label">'+attr.productAttrName+'</label><div class="layui-input-block">';
							if(attr.values!=null && attr.values!="undefined"){
								$.each(attr.values,function (index,val) {
									salesAttrs += '<input type="checkbox"  name="'+attr.productAttrName+'"   data-attr="'+attr.productAttrId+'" data-value="'+val.productAttrValueId+'" title="'+val.productAttrValue+'" >';
								});
							}
							$('#skuNames').append("<th>"+attr.productAttrName+'</th>');
							salesAttrs += '</div></div>';
							return;
						}
						attrsHtml += '<div class="layui-form-item"><label class="layui-form-label">'+attr.productAttrName+'</label><div class="layui-input-block">';
						if(attr.inputType==0){
							attrsHtml+='<input type="text" name="attr-'+attr.id+'" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">';
						}else{
							attrsHtml += '<select name="attr-'+attr.id+'" lay-verify="">';
							attrsHtml += '<option name=""value="">请选择</option>'
							if(attr.values!=null && attr.values.length>0 &&attr.values!="undefined"){
								$.each(attr.values,function (index,val) {
									attrsHtml += '<option value="'+val.id+'">'+val.productAttrValue+'</option>'
								});
							}

							attrsHtml += '</select>';
						}
						attrsHtml += '</div></div>';
					});
				}
			}
		}
        $('#attrs').html(attrsHtml);
    }





    function save(isFreshen) {
        var temp=$('.layui-form').serializeArray();
        //console.log(temp);
        var param = {};
        var attrJson = {};
        param.attrJson = attrJson;
        $.each(temp,function (i,val) {
			if(val.name.indexOf('attr-')>=0){
			    attrJson[val.name.substr('attr-'.length)+""] = val.value;
			}else{
                param[val.name] = val.value;
			}
        });

        param.op = 'save';
        param.attrJson = JSON.stringify(param.attrJson);
        $.ajax({
            type : 'post',
            url : '${base}/product/manager',
			data:param,
            async:false,
            dataType : 'json',
            success :  function(res){
                alert(res.msg);
				if(!isFreshen){
					window.location.reload();
				}
            }
        });

    }
</script>

</body>
</html>